<script>
// import MvItem from './Mv-item';
import VideoPlayer from '@/components/Player/VideoPlayer';
import { checkoutType } from '@/utils/optimize';
import { changeBigCount, changeSeconds } from '@/utils/figure';

export default {
  name: 'MvList',

  components: {
    VideoPlayer
  },

  props: {
    mvList: {
      type: Array,
      default() {
        return []
      }
    },
    // 播放量
    playcount: {
      type: Number,
      default: 0
    },
    // 播放时间
    durationms: {
      type: Number,
      default: 0
    },
    // 视频图片
    cover: {
      type: String,
      default: ''
    },
    // 视频标题
    videoTitle: {
      type: String,
      default: ''
    },
    // 视频作者
    videoAuthor: [Array, Object, String],
    // 自定义样式
    mvStyle: {
      type: Object,
      default: () => {}
    }
  },

  data() {
    return {
      show: false
    };
  },

  computed: {
    playCount() {
      return changeBigCount(this.playcount);
    },
    // 播放时间
    playTime() {
      return changeSeconds(this.durationms);
    }
  },

  mounted() {
    
  },

  methods: {
    // 显示隐藏播放按钮
    playVideo(e) {
      e.stopPropagation();
      this.show = !this.show;
      console.log(this.$refs.video)
      // if (this.show) {
      //   // console.log(this.$refs.vi)
      //   this.$refs.video.videoPlayer.play();
      // } else {
      //   this.$refs.video.videoPlayer.pause();
      // }
      // this.getChildren(this.mvInfo);
      // this.$emit('miniVideoPlay');
    },
    goDetail(event) {
      this.$emit('goDetail', event);
    }
  },

  render(h) {
    const type = checkoutType(this.videoAuthor);
    let author = null;
    // 如果是数组格式
    if (type === 'Array') {
      author = this.videoAuthor.map(item => {
        return h('span', {
          domProps: {
            innerHTML: item.name || item.userName
          },
          attrs: {
            'data-aid': item.id
          }
        });
      });
    } else if (type === 'Object') {
      author = h('span', {
        domProps: {
          innerHTML: `by ${this.videoAuthor.nickname}`
        },
        attrs: {
          'data-aid': this.videoAuthor.userId
        }
      })
    }
    return h('div', {
      staticClass: 'mv-item mbottom-10',
      style: this.mvStyle
    }, [
      h('div', {
        staticClass: 'mv',
        on: {
          mouseenter: this.playVideo,
          mouseleave: this.playVideo
        }
      }, [
        // 播放量
        h('div', {
          staticClass: 'play-amount'
        }, [
          h('a-icon', {
            props: {
              type: 'caret-right'
            }
          }),
          h('span', {
            domProps: {
              innerHTML: this.playCount
            }
          })
        ]),
        // 视频图片
        h('div', {
          staticClass: 'video-img',
          on: {
            click: this.goDetail
          }
        }, [
          h('img', {
            staticClass: 'img-percent',
            directives: [
              {
                name: "lazy",
                rawName: "v-lazy",
                value: `${this.cover}?param=330y180`,
                expression: "this.mvInfo.coverUrl",
              },
              // {
              //   name: 'show',
              //   rawName: 'v-show',
              //   value: this.show,
              //   expression: "show"
              // }
            ]
          }),
          // h('video-player', {
          //   ref: 'video',
          //   props: {
          //     options: {
          //       poster: 'https://p2.music.126.net/Fh-1DbO1zNvGLTf83BEgNA==/109951163573866074.jpg?param=320y180',
          //       sources: [
          //         {
          //           src: "http://vjs.zencdn.net/v/oceans.mp4",
          //           type: "video/mp4"
          //         }
          //       ]
          //     },
          //     controlBar: false
          //   }
          // })
        ]),
        // 播放时长
        h('div', {
          staticClass: 'mv-time',
          domProps: {
            innerHTML: this.playTime
          },
          directives: [
            {
              name: "show",
              rawName: "v-show",
              value: this.durationms,
              expression: "this.durationms",
            }
          ]
        }),
        // mvTime,
        // 播放按钮
        h('div', {
          staticClass: 'play-btn pointer',
          ref: 'playBtn',
          class: [ this.show ? 'opcity' : 'no-opcity' ]
        }, [
          h('a-icon', {
            staticClass: 'font-20',
            props: {
              type: 'caret-right'
            },
            // directives: [
            //   {
            //     name: "show",
            //     rawName: "v-show",
            //     value: this.durationms,
            //     expression: "this.durationms",
            //   }
            // ]
          })
        ])
        // button
      ]),
      // 右侧视频信息
      h('div', {
        style: {
          width: '100%'
        }
      }, [
        // 视频标题
        h('div', {
          staticClass: 'video-title text-hidden mtop-5',
          attrs: {
            title: this.videoTitle
          },
          domProps: {
            innerHTML: this.videoTitle
          }
        }),
        // 作者
        h('div', {
          staticClass: 'authors text-hidden font-12',
          style: {
            color: '#cfcfcf'
          },
          on: {
            click: this.goDetail
          }
        }, [author])
      ])
    ])
  }
};
</script>

<style lang="less" scoped>
// .mv_list_uni {
  // float: left;
  // >ul {
    // display: flex;
    // flex-wrap: wrap;
    // margin-top: 10px;
  .mv-item {
    width: 25%;  
    display: inline-block;
    margin-top: 10px;
    padding: 0 15px;
    // margin-right: 5%;
    .mv {
      position: relative;
      border-radius: 5px;
      overflow: hidden;
      .play-amount {
        position: absolute;
        top: 5px;
        right: 10px;
        color: #fff;
        font-size: 12px;
        span {
          text-shadow: 0 0 3px #2c3e50;
        }
      }
      .mv-time {
        position: absolute;
        bottom: 5px;
        right: 10px;
        color: #fff;
        font-size: 12px;
      }
      .video-img {
        width: 100%;
        height: auto;
      }
      .play-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: #fbf7f6;
        color: #ec4141;
        border-radius: 50%;
        transition: all .5s;
      }
      .opcity {
        opacity: 1;
      }
      .no-opcity {
        opacity: 0;
      }
    }
    .authors>span {
      cursor: pointer;
      &::after {
        content: ' / ';
        display: inline-block;
      }
      &:last-child::after {
        display: none;
      }
    }
  }
// }
</style>